<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<title>午夜聊天室</title>
</head>
<body style="background:url(yidong.jpg)top center no-repeat; background-size:cover;">

<textarea id="theTemplate" style="display:none">
	<a href="#" onclick="sendTo('#TO')"><span style="color: #COLOR; ">#FROM</span></a>#MSG
</textarea>

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260962122'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1260962122%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
	<script type="text/javascript">


		var nickname;
		var socket;
		var toSomeOne = "";
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://127.0.0.1:8686/ws");
			
			socket.onmessage = function(event) {
				//var ta = document.getElementById('responseText');
			//	ta.value = ta.value + '\n' + ''+event.data;
				eventfilter(event.data);
			};
			socket.onopen = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = "你已经进入神秘的午夜聊天室!";
			};
			socket.onclose = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + "\n 服务器死了，悲哀";
			};
		} else {
			alert("换手机吧， 你真用不了这程序！");
		}

		function eventfilter(eventdata){
//			alert(eventdata);
			var t = eventdata.split("#");
			if(t[0]=='msg'){
                var msg = document.getElementById("theTemplate").value.replace("#TO",t[1]).replace("#FROM",t[1] +"说:").replace("#MSG",t[2]) ;
				appendMsg(msg);
			}else if(t[0]=="privateMsg"){
                var msg = document.getElementById("theTemplate").value.replace("#TO",t[1]).replace("#FROM",t[1] +"对你说:").replace("#MSG",t[2]).replace("#COLOR","red") ;
			    if(t[1] == "["+nickname+"]") {
                    var msg = document.getElementById("theTemplate").value.replace("#TO",t[3]).replace("#FROM","你对"+t[3] +"说:").replace("#MSG",t[2]).replace("#COLOR","red") ;
                }
                appendMsg(msg);
			}else if(t[0]=='sysmsg'){
				var msg = t[1];
				appendMsg(msg);
			}else if(t[0]=='nickerror'){
				alert(t[1]);
				document.getElementById("nameDiv").style.display="block";
			    document.getElementById("room").style.display="none";
			}else if(t[0]=='listcount'){
				document.getElementById("listcount").innerText = "当前在线："+t[1]+" 人";
			}
		}

		function sendTo(to) {
		    if(to == "["+nickname+"]") {

				return;
            }
            toSomeOne = "你对" + to + "说:";
		    document.getElementById("messageid").value = toSomeOne;
        }

		<!-- 普通文本-->
		function appendMsg(msg) {
            var ta = document.getElementById('responseText');
            ta.innerHTML = ta.innerHTML + msg+"<br>";
			ta.scrollTop = ta.scrollHeight;
		} 

	

		<!-- 发送出口-->
		function sendx(message) {
			if (!window.WebSocket) {

				return false;
			}
			if (socket.readyState == WebSocket.OPEN) {				
				socket.send(message);
				return true;
				
			} else {
				alert("连接没有开启.");
				return false;
			}
		}
		<!-- 发送普通消息-->
			function sendMsg(message) {	
				if(trim(message)==toSomeOne){
					alert('说点啥');
					return;
				}
				if( message.indexOf("#")!=-1){
					alert('请别输入#，这会让系统驾崩的.');
					return;
				}
				message='msg#' +nickname+'#'+message;
			    if(sendx(message)){
					document.getElementById('messageid').value=toSomeOne;
				}			
		   }
		<!-- 这是要拿名字了-->
		function showName()
		{
		    nickname=trim(document.getElementById("nickname").value);
			if(nickname =='大侠请赐名' || nickname==''){
				alert('别闹，亲，快改个名字~');
				return;
			}
			
			sendname = 'nickname#'+nickname;
			if(sendx(sendname)){
				document.getElementById("nameDiv").style.display="none";
			    document.getElementById("room").style.display="block";
			}		
			
		}

		function trim(str) {
			return str.replace(/(^\s+)|(\s+$)/g, "");
	}


	</script> 

<center>


<div id="nameDiv" style="display:block;margin-top:10px">

 <input id='nickname' style="" type="text"  value="大侠请赐名" onfocus='if(this.value=="大侠请赐名"){this.value="";}' />
  <input type="button" onclick="showName();" value="赐名" />

</div> 

</center>

<div id="room" style="display:none">
	<form onsubmit="return false;" width="100%">
		<center><h3>午夜聊天室</h3></center>		
		<p  style="color:blue;font-size:8px;"  id="listcount"> </p>
		<div id="responseText" style="overflow:auto;width:99%;height:450px;background:transparent;border-style:none;resize:none;" readonly="readonly"></div>
		<br> 
		<input id="messageid" type="text" name="message" onkeydown='if(event.keyCode==13)sendMsg(this.form.message.value);' style="height:30px;width:82%;border:0px;margin-top:10px;border-radius:3px;" value="">
		<input type="button" style="width:16%;height:33px;border:0px;background:#009535;border-style:none;color:white;border-radius:3px;margin-top:2px" value="发送" onclick="sendMsg(this.form.message.value)">
		</br>
		<input style="width:16%;margin-top:10px;height:30px;background:red;border-style:none;color:white;border-radius:3px;"type="button" onclick="javascript:document.getElementById('responseText').innerHTML=''" value="清屏">
	</form>
	<br> 
	<br>
	</div>
</body>
</html>
